<template>
  <div class ="watchEffectDemo">
    <div> 水位 {{shuiwei}}</div>
    <button @click="addWater">加水</button>
    <div> 水温 {{shuiwen}}</div>
    <button @click="addHot">加热</button>
  </div>
</template>

<script lang="ts">
import {ref, watch,watchEffect} from 'vue'

  export default {
    name:'watchEffectDemo',
    setup(){
      let shuiwei = ref(0)
      let shuiwen = ref(10)
      function addWater(){
        shuiwei.value +=10
      }
      function addHot(){
        shuiwen.value+=10
      }

      watch([shuiwei,shuiwen],(value)=>{
        console.log(value)
        if(shuiwei.value >80 || shuiwen.value>=80){
          console.log("发请求")
        }
      })
  //watchEffect 是自动监视， 你在函数里用到了谁，他就会自动监视谁， 不用watch要指定监视的值
      watchEffect(()=>{
        if(shuiwei.value >80 || shuiwen.value>=80){
          console.log("发请求")
        }
      })
     return {shuiwen,shuiwei,addWater,addHot}
    }
  }
</script>